<template>
  <div>
    <h2>{{$route.meta.title}}:</h2>
    <div>
      <el-input v-model="merchantOptions.agentNo" placeholder="请输入代理商编号" size="mini" class="input"></el-input>状态选择:
      <el-select v-model="merchantOptions.status" placeholder="请选择" size="mini">
        <el-option
          v-for="(val,key) in agentStatus"
          :key="val"
          :label="val"
          :value="key"
          class="input"
        ></el-option>
      </el-select>
      <el-button type="primary" size="mini" style="margin: 0 0 0 20px" @click="search">搜索代理商</el-button>
      <el-button type="primary" size="mini" style="margin: 0 0 0 50px" @click="add">新增</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column prop="agentId" fixed label="代理商Id"></el-table-column>
      <el-table-column prop="agentNo" fixed label="代理商编号" width="180"></el-table-column>
      <el-table-column label="代理商状态" fixed>
        <template v-slot="{ row }">
          <span>{{agentStatus[row.status]}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="epSimpleName" fixed label="企业简称" width="180"></el-table-column>
      <el-table-column prop="epName" fixed label="企业名称" width="180"></el-table-column>
      <el-table-column prop="mccno" label="Mcc编号"></el-table-column>
      <el-table-column prop="agentAddr" label="地址"></el-table-column>
      <el-table-column prop="userName" label="联系人"></el-table-column>
      <el-table-column prop="userPhone" label="联系人手机号"></el-table-column>
      <el-table-column prop="userEmail" label="联系人邮箱"></el-table-column>
      <el-table-column prop="legalName" label="法人姓名"></el-table-column>
      <el-table-column prop="legalPhone" label="法人手机号"></el-table-column>
      <el-table-column prop="legalCardNo" label="法人身份证号码"></el-table-column>
      <el-table-column prop="legalEmail" label="法人邮箱"></el-table-column>
      <el-table-column prop="taxpayerNo" label="纳税人识别码"></el-table-column>
      <el-table-column prop="organCode" label="组织机构代码"></el-table-column>
      <el-table-column prop="businlicNo" label="营业执照编号"></el-table-column>
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="handleEdit(row)">修改</el-button>
          <!-- <el-button size="mini" type="danger" @click="noUse(row)">禁用</el-button> -->
          <!-- <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="dis-center">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pageInfo.page"
        :page-size.sync="pageInfo.size"
        layout="prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog :title="type === 1? '新增代理商' : '修改代理商'" :visible.sync="dialogFormVisible" width="60%">
      <el-form :model="merchantInfo" :inline="true" ref="merchantForm" :rules="merchantRules">
        <el-form-item label="代理商编号" :label-width="formLabelWidth" prop="agentNo" v-if="type === 1">
          <el-input v-model="merchantInfo.agentNo" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" v-if="type === 2">
          <el-select v-model="merchantInfo.status" placeholder="请选择" size="mini">
            <el-option
              v-for="(val,key) in agentStatus"
              :key="val"
              :label="val"
              :value="Number(key)"
              class="input"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业简称" :label-width="formLabelWidth" prop="epSimpleName">
          <el-input
            v-model="merchantInfo.epSimpleName"
            autocomplete="off"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业名称" :label-width="formLabelWidth" prop="epName">
          <el-input v-model="merchantInfo.epName" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="MCC编号" :label-width="formLabelWidth">
          <el-input v-model="merchantInfo.mccno" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="代理商地址" :label-width="formLabelWidth" prop="agentAddr">
          <el-input v-model="merchantInfo.agentAddr" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="联系人名字" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="merchantInfo.userName" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机号" :label-width="formLabelWidth" prop="userPhone">
          <el-input v-model="merchantInfo.userPhone" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="联系人证件号码" :label-width="formLabelWidth" prop="userCardNo">
          <el-input
            v-model="merchantInfo.userCardNo"
            type="number"
            autocomplete="off"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人邮箱" :label-width="formLabelWidth" prop="userEmail">
          <el-input v-model="merchantInfo.userEmail" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" :label-width="formLabelWidth" prop="userPwd" v-if="type === 1">
          <el-input v-model="merchantInfo.userPwd" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="付款密码" :label-width="formLabelWidth" prop="payPwd" v-if="type === 1">
          <el-input v-model="merchantInfo.payPwd" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="法人姓名" :label-width="formLabelWidth">
          <el-input v-model="merchantInfo.legalName" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="法人手机号" :label-width="formLabelWidth">
          <el-input
            v-model="merchantInfo.legalPhone"
            type="number"
            autocomplete="off"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="法人身份证号码" :label-width="formLabelWidth">
          <el-input
            v-model="merchantInfo.legalCardNo"
            type="number"
            autocomplete="off"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="法人邮箱" :label-width="formLabelWidth">
          <el-input v-model="merchantInfo.legaEmail" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别码" :label-width="formLabelWidth">
          <el-input v-model="merchantInfo.taxpayerNo" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="组织机构代码" :label-width="formLabelWidth">
          <el-input v-model="merchantInfo.organCode" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="营业执照编号" :label-width="formLabelWidth">
          <el-input v-model="merchantInfo.businlicNo" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="费率" :label-width="formLabelWidth" prop="rate">
          <el-input
            v-model="merchantInfo.rate"
            autocomplete="off"
            type="number"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="提现手续费" :label-width="formLabelWidth" prop="serviceCharge">
          <el-input
            v-model="merchantInfo.serviceCharge"
            autocomplete="off"
            size="mini"
            type="number"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="merchantInfo.remark" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAgent, addAgent, updAgent } from "@/api/agentManage";
const agentStatus = {
  1: "正常",
  2: "已禁用",
  3: "已删除"
};
export default {
  name: "agentManage",
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      agentStatus,
      type: 0,
      pageInfo: {
        page: 1,
        size: 10
      },
      merchantOptions: {
        agentNo: "",
        status: "1"
      },
      merchantInfo: {},
      merchantRules: {
        agentNo: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        epSimpleName: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        epName: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        agentAddr: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        userName: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        userPhone: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        userCardNo: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        userEmail: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        userPwd: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        payPwd: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        rate: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        serviceCharge: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ]
      },
      tableData: []
    };
  },
  methods: {
    getlistAgent(data) {
      return data ? listAgent(data) : listAgent();
    },
    handleCurrentChange(val) {
      this.getlistAgent({
        page: val
      }).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.pageInfo = res.data.pageInfo;
        }
      });
    },
    add() {
      this.merchantInfo = {
        agentNo: "",
        epSimpleName: "",
        epName: "",
        mccno: "",
        agentAddr: "",
        userName: "",
        userPhone: "",
        userCardNo: "",
        userEmail: "",
        userPwd: "",
        payPwd: "",
        legalName: "",
        legalPhone: "",
        legalCardNo: "",
        leaddgaEmail: "",
        taxpayerNo: "",
        organCodeb: "",
        usinlicNo: "",
        rate: "", //double
        serviceCharge: "", //double
        remark: ""
      };
      this.dialogFormVisible = true;
      this.type = 1;
    },
    search() {
      this.getlistAgent(this.merchantOptions).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.pageInfo = res.data.pageInfo;
        }
      });
    },
    addAgentManage() {
      this.$refs["merchantForm"].validate(valid => {
        if (valid) {
          this.merchantInfo.rate = parseFloat(this.merchantInfo.rate).toFixed(
            2
          );
          this.merchantInfo.serviceCharge = parseFloat(
            this.merchantInfo.serviceCharge
          ).toFixed(2);
          let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            reg2 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
          if (!reg.test(this.merchantInfo.userEmail)) {
            return this.$message.warning("邮箱格式不正确");
          }

          if (
            this.merchantInfo.legaEmail &&
            !reg.test(this.merchantInfo.legaEmail)
          ) {
            return this.$message.warning("邮箱格式不正确");
          }

          if (!reg2.test(this.merchantInfo.userCardNo)) {
            return this.$message.warning("身份证格式不正确");
          }

          if (
            this.merchantInfo.legalCardNo &&
            !reg2.test(this.merchantInfo.legalCardNo)
          ) {
            return this.$message.warning("身份证不正确");
          }
          addAgent(this.merchantInfo).then(res => {
            if (res.data.code === 200) {
              this.$message.success("添加成功");
              this.dialogFormVisible = false;
              this.$router.go(0);
            } else {
              this.$message.warning(res.data.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    updateAgentManage() {
      this.$refs["merchantForm"].validate(valid => {
        if (valid) {
          let {
            agentId,
            status,
            epSimpleName,
            epName,
            mccno,
            agentAddr,
            userName,
            userPhone,
            userCardNo,
            userEmail,
            legalName,
            legalPhone,
            legalCardNo,
            legaEmail,
            taxpayerNo,
            organCode,
            businlicNo,
            rate,
            serviceCharge,
            remark
          } = this.merchantInfo;
          rate = parseFloat(rate).toFixed(2);
          serviceCharge = parseFloat(serviceCharge).toFixed(2);
          if (status === 3) {
            this.$confirm("确定更改为删除状态?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                updAgent({
                  agentId,
                  status,
                  epSimpleName,
                  epName,
                  mccno,
                  agentAddr,
                  userName,
                  userPhone,
                  userCardNo,
                  userEmail,
                  legalName,
                  legalPhone,
                  legalCardNo,
                  legaEmail,
                  taxpayerNo,
                  organCode,
                  businlicNo,
                  rate,
                  serviceCharge,
                  remark
                }).then(res => {
                  if (res.data.code === 200) {
                    this.$message.success("修改成功");
                    this.dialogFormVisible = false;
                    this.$router.go(0);
                  } else {
                    this.$message.warning(res.data.message);
                  }
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
          } else {
            updAgent({
              agentId,
              status,
              epSimpleName,
              epName,
              mccno,
              agentAddr,
              userName,
              userPhone,
              userCardNo,
              userEmail,
              legalName,
              legalPhone,
              legalCardNo,
              legaEmail,
              taxpayerNo,
              organCode,
              businlicNo,
              rate,
              serviceCharge,
              remark
            }).then(res => {
              if (res.data.code === 200) {
                this.$message.success("添加成功");
                this.dialogFormVisible = false;
                this.$router.go(0);
              } else {
                this.$message.warning(res.data.message);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addConfirm() {
      if (this.type === 1) {
        this.addAgentManage();
      } else {
        this.updateAgentManage();
      }
    },
    handleEdit(row) {
      this.type = 2;
      this.dialogFormVisible = true;
      this.merchantInfo = row;
    },
    handleDelete(row) {},
    noUse(row) {}
  },
  created() {
    this.search();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../styles/norlize.scss";
</style>